<template>
    <Layout>
        <Form ref="form1" :label-width="100">
            <Row v-show="!switchFlag" :gutter="16" class="query-form">
                <Col span="8">
                    <FormItem label="发送人：">
                        <Input class="query-form-el" type="text" v-model="userName"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="状态：">
                        <CheckboxGroup v-model="isRead">
                            <Checkbox label="1">已读</Checkbox>
                            <Checkbox label="0">未读</Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开
                        <Icon type="ios-arrow-down"/>
                    </Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" :gutter="16" class="query-form" >
                <Col span="8">
                    <FormItem label="发送人：">
                        <Input class="query-form-el" type="text" v-model="userName"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="状态：">
                        <CheckboxGroup v-model="isRead">
                            <Checkbox label="1">已读</Checkbox>
                            <Checkbox label="0">未读</Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="消息内容：">
                        <Input class="query-form-el" type="text" v-model="content"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form" :gutter="16">
                <Col span="8">
                    <FormItem label="类型：">
                        <CheckboxGroup v-model="type">
                            <Checkbox label="1">发送</Checkbox>
                            <Checkbox label="0">接收</Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
                <Col span="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起
                        <Icon type="ios-arrow-up"/>
                    </Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="ios-mail-open" class="ivu-btn-add" @click="allRead">全部已读</Button>
            </i-col>
        </Row>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" :loading="loading" class="no-add-table"
               highlight-row stripe border :columns="columns1" :data="dataTable" @on-row-click="clickRow" width="100%"
               size="small">
        </Table>

        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange"
                      @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                      show-elevator/>
            </Col>
        </Row>

    </layout>
</template>

<script>
import {Api} from '../../../api/index.js'
import {sessionStorage} from '../../../common/cacheUtils.js';

export default {
        components: {},
        data() {
            return {
                tableHeight: '',
                switchFlag: false,
                userName: '',
                isRead: ["0", "1"],
                content: '',
                type: ["0", "1"],
                loading: false,
                form1: {},
                dataTable: [],
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns1: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        minWidth: 150,
                        title: '状态',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.isRead == '1')
                                return h("span", "已读");
                            else
                                return h("span", "未读");
                        }
                    },
                    {
                        minWidth: 150,
                        title: '发送人',
                        render: (h, params) => {
                            return h("span", params.row.message.pushUserName);
                        },
                        align: 'center',
                    },
                    {
                        minWidth: 150,
                        title: '接收人',
                        key: 'userName',
                        align: 'center',
                    },
                    {
                        minWidth: 210,
                        title: '发送时间',
                        key: 'pushTime',
                        align: 'center'
                    },
                    {
                        minWidth: 220,
                        align: 'center',
                        title: '内容',
                        render: (h, params) => {
                            return h("span", params.row.message.content);
                        },
                    },
                    {
                        minWidth: 150,
                        align: 'center',
                        fixed: 'right',
                        title: '操作',
                        render: (h, params) => {
                            if (params.row.message.route) {
                                return h('div', [
                                    h('A', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            fontSize: '14px'
                                        },
                                        on: {
                                            click: () => {
                                                // this.$router.push({path:params.row.message.route });
                                                this.clickRow(params.row);
                                                let data = {
                                                    id: params.row.message.menuId.substr(0, 5),
                                                    fastMenu: params.row.message.route
                                                };
                                                this.$router.push({path: '/modular', query: data});
                                            }
                                        }
                                    }, '查看'),
                                ]);
                            } else {
                                return h('div', [
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        style: {fontSize: '14px', color: '#c5c8ce', pointerEvents: 'none'},
                                    }, '查看'),
                                ]);
                            }

                        },
                    },
                ]
            }
        },
        mounted: function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods: {
            reset() {

            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            switchQuery(flag) {
                this.switchFlag = flag;
                if (!this.switchFlag) {
                    this.tableHeight = this.tableHeight + 44;
                } else {
                    this.tableHeight = this.tableHeight - 44;
                }
            },
            clickRow(data) {
                this.$http.get(Api.UserNoticeRead + "/" + data.userNoticeId).then((res) => {
                    this.query();
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            query() {
                this.$emit("refreshNotice");
                let user = sessionStorage('userId').get('userId');
                let userJson = JSON.parse(user);
                let reqType = "", reqRead = "";
                if (this.type.length == 2) {
                    reqType = "3";
                } else if (this.type.length == 0) {
                    reqType = "4"
                } else
                    reqType = this.type[0];
                if (this.isRead.length == 2) {
                    reqRead = "3";
                } else if (this.isRead.length == 0) {
                    reqRead = "4"
                } else
                    reqRead = this.isRead[0];
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    userName: this.userName,
                    isRead: reqRead,
                    content: this.content,
                    type: reqType
                }
                this.loading = true;
                let url = Api.queryNotice + "/" + userJson.userId;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            allRead(){
                this.$emit("refreshNotice");
                let user = sessionStorage('userId').get('userId');
                let userJson = JSON.parse(user);
                let reqType = "", reqRead = "";
                if (this.type.length == 2) {
                    reqType = "3";
                } else if (this.type.length == 0) {
                    reqType = "4"
                } else
                    reqType = this.type[0];
                if (this.isRead.length == 2) {
                    reqRead = "3";
                } else if (this.isRead.length == 0) {
                    reqRead = "4"
                } else
                    reqRead = this.isRead[0];
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    userName: this.userName,
                    isRead: reqRead,
                    content: this.content,
                    type: reqType
                }
                this.loading = true;
                let url = Api.UserNoticeAllRead + "/" + userJson.userId;
                this.$http.get(url, {params: data}).then((res) => {
                    if(res.data.status == 200){
                        this.query();
                    }
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            }
        },
    }
</script>
<style scoped>
    @import '../../../index.css';

</style>
